export const addImageList = (editor) => {
  const opts = editor.otherNewsData
    ? editor.otherNewsData
    : {
        id: "image-list",
        label: "Image List",
        classPrefix: "image-list",
        style: "",
        styleAdditional: "",
      };

  const { Components, BlockManager } = editor;
  const { id, label } = opts;

  const listPfx = opts.classPrefix;
  const idContainer = `${id}-container`;
  const idListLink = `${id}-list-link`;
  const idListImage = `${id}-list-image`;

  Components.addType(id, {
    model: {
      defaults: {
        name: label,
        attributes: { class: listPfx, "data-gjs-type": id },
        components: { type: idContainer },
        styles:
          (opts.style ||
            `
          .${listPfx} {
            padding: 0;
            margin: 0;
            width: 100%;
            display: flex;
          }

          .${listPfx}-container {
            list-style-type: square;
            padding-left: 0;
            margin: 0 auto;
            width: 96%;
            display: flex;
            align-items: flex-start;
            margin-bottom: 10px;
          }
          
          .${listPfx}-container img {
            object-fit: cover;
            margin-right: 20px;
          }

          .${listPfx}-text-container {
            width:90%;
            list-style-type: square;
            padding-left: 0;
            margin: 0;
          }

          .${listPfx}-text-container li {
            border-bottom: 1px dotted #000;
            padding:2px;
            margin-bottom: 5px;
          }
            
          .${listPfx}-text-container li a {
            width:100%;
            display: block; 
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            padding-left: 0;
            margin: 0;
          }
        `) + opts.styleAdditional,
      },
    },
  });

  Components.addType(idContainer, {
    model: {
      defaults: {
        attributes: {
          class: `${listPfx}-container`,
          "data-gjs": "image-list",
          "data-gjs-type": idContainer,
        },
        name: "Image List Container",
        draggable: false,
        removable: false,
        copyable: false,
        highlightable: false,
        components: [
          { type: idListImage, attributes: { alt: "Image" } },
          {
            tagName: "ul",
            attributes: { class: `${listPfx}-text-container` },
            components: [
              {
                tagName: "li",
                components: [{ type: idListLink, components: "基础实验3室" }],
              },
              {
                tagName: "li",
                components: [{ type: idListLink, components: "多功能实训室" }],
              },
            ],
          },
        ],
      },
    },
  });

  Components.addType(idListLink, {
    extend: "link",
    model: {
      defaults: {
        name: "List Link",
        draggable: `[data-gjs-type="${idContainer}"]`,
        attributes: { "data-gjs-type": idListLink },
      },
    },
  });

  Components.addType(idListImage, {
    extend: "image",
    model: {
      defaults: {
        name: "List Image",
        tagName: "img",
        attributes: {
          "data-gjs-type": idListImage,
        },
        traits: [
          {
            type: "alt",
            name: "alt",
            label: "alt",
            default: "Image",
          },
          {
            type: "text",
            name: "href",
            label: "Href",
            default: "",
          },
          {
            type: "select",
            name: "target",
            label: "Target",
            options: [
              { id: "_self", label: "此窗口" },
              { id: "_blank", label: "新窗口" },
            ],
            default: "_self",
          },
        ],
        script: function () {
          const href = this.getAttribute("href");
          const target = this.getAttribute("target");
          this.style.cursor = "pointer";
          this.addEventListener("click", () => {
            if (href) {
              window.open(href, target);
            }
          });
        },
      },
    },
  });

  BlockManager.add("image-list", {
    label: "图列表混排",
    category: "新闻类",
    media: `<svg t="1720769656923" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="37637" width="30" height="30"><path d="M32 447.9h384c17.7 0 32-14.3 32-32V32c0-17.7-14.3-32-32-32H32C14.3 0 0 14.3 0 32v383.9c0 17.6 14.3 32 32 32zM64 64h320v319.9H64V64zM608 128h384c17.7 0 32-14.3 32-32s-14.3-32-32-32H608c-17.7 0-32 14.3-32 32s14.3 32 32 32zM992 480H608c-17.7 0-32 14.3-32 32s14.3 32 32 32h384c17.7 0 32-14.3 32-32s-14.3-32-32-32zM992 896H608c-17.7 0-32 14.3-32 32s14.3 32 32 32h384c17.7 0 32-14.3 32-32s-14.3-32-32-32zM263.1 552.4c-12.5-12.5-32.8-12.5-45.3 0L9.4 760.9c-6 6-9.4 14.1-9.4 22.6s3.4 16.6 9.4 22.6l208.4 208.4c6.2 6.2 14.4 9.4 22.6 9.4 8.2 0 16.4-3.1 22.6-9.4L471.5 806c6-6 9.4-14.1 9.4-22.6s-3.4-16.6-9.4-22.6L263.1 552.4z m-22.7 394.3L77.3 783.6l163.2-163.2 163.2 163.2-163.3 163.1z" p-id="37638"></path></svg>`,
    select: true,
    content: { type: "image-list" },
  });
};
